<template>
    <div class="banner container">
        <div class="swiper-container" ref="banner">
            <div class="swiper-wrapper">
                <div class="swiper-slide"  v-for="(item,index) in data" :key="index" >
                    <img :src="item.image" alt="" />
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
</template>

<script setup>
import { onMounted,watch,ref } from 'vue';
let props=defineProps(['data'])
const banner = ref();
let swiper = null;
onMounted(() => {
      // 创建轮播图
      swiper = new Swiper(banner.value, {
        pagination: '.swiper-pagination',
        loop: true,
        autoplayDisableOnInteraction: false,
        autoplay: 3000
      });
      
    })

    watch(()=>props.data, () => {
      // 更新轮播图
      swiper.update();
      swiper.reLoop();
      swiper.slideTo(1, 0);
    }, {
      flush: 'post'
    });
</script>

<style lang="scss" scoped>
@import '@/assets/style/variable.scss';
.banner{
    margin: 10px auto;
    width: 90%;
    height: 140px;
    background-color: aqua;
    .swiper-container{
        width: 100%;
        height: 100%;
        img{
        width: 100%;
        height: 100%;
    }
    }
    
}
</style>